<template>
  <a-card :bordered="false">
    <a-alert
      description="您的油卡未启用，请联系综管中心转移或开卡！"
      type="warning"
      show-icon
      style="margin-bottom:10px"
      v-if="dataInfo.cardStatus == '0'"
    />
    <!-- {{ dataInfo }} -->
    <a-row type="flex" justify="space-around" align="middle">
      <a-col :span="6">
        <div style="display: flex; align-items:center">
          <!-- <img
            :src="dataInfo.photo"
            alt=""
            style=" width: 90px; height: 110px;"
          > -->
          <j-image-upload disabled isMultiple v-model="dataInfo.photo" style=" width: 90px; height: 110px;"></j-image-upload>
          <div style="margin-left: 50px;">
            <p>姓名：<span>{{ dataInfo.username }}</span></p>
            <p>所在部门：<span>{{ dataInfo.deptId }}</span></p>
            <!-- <p>油卡卡号：<span>{{ dataInfo.cardNumber }}</span></p> -->
            <p>油卡卡号：<span>{{ dataInfo.cardNumberTxt }}</span></p>
          </div>

        </div>
      </a-col>
      <a-col :span="4" style="text-align: center">
        <a-card hoverable>
          <p v-if="dataInfo.cardStatus == '1'" style="color: #1890FF; font-size: 800; font-size: 16px;">{{ dataInfo.drivingSubsidyBalance }} 元</p>
          <p v-else style="color: #1890FF; font-size: 800; font-size: 16px;">0 元</p>
          <p>截止当前累计自驾补助余额</p>
          <div style="display: flex; justify-content: space-around;">
            <a-button type="primary" @click="oilCardPayHandle(1)" :disabled="!dataInfo.drivingSubsidyBalance || dataInfo.cardStatus == '0'">油卡充值</a-button>
            <a-button type="primary" @click="oilWithdrawHandle()" :disabled="!dataInfo.drivingSubsidyBalance || dataInfo.drivingSubsidyBalance<= 2000 || dataInfo.cardStatus == '0'">提现</a-button>
          </div>
        </a-card>

      </a-col>
<!--      <a-col :span="4" style="text-align: center">-->
<!--        <a-card hoverable>-->
<!--          <p v-if="dataInfo.cardStatus == '1'" style="color: #1890FF; font-size: 800; font-size: 16px;">{{ dataInfo.carSubsidyBalance }} 元</p>-->
<!--          <p v-else style="color: #1890FF; font-size: 800; font-size: 16px;">0 元</p>-->
<!--          <p>累计车贴余额</p>-->
<!--          <div>-->
<!--            <a-button type="primary" @click="oilCardPayHandle(2)">油卡充值</a-button>-->
<!--          </div>-->
<!--        </a-card>-->

<!--      </a-col>-->
      <a-col :span="4" style="text-align: center">
        <a-card hoverable>
          <p v-if="dataInfo.cardStatus == '1'" style="color: #1890FF; font-size: 800; font-size: 16px;">{{ dataInfo.payBalance }} 元</p>
          <p v-else style="color: #1890FF; font-size: 800; font-size: 16px;">0 元</p>
          <p>累计充值金额</p>
          <div v-show="false">
            <a-button type="primary"></a-button>
          </div>
        </a-card>

      </a-col>
      <a-col :span="4" style="text-align: center">
        <a-card hoverable>
          <p v-if="dataInfo.cardStatus == '1'" style="color: #1890FF; font-size: 800; font-size: 16px;">{{ dataInfo.withdrawnMoney }} 元</p>
          <p v-else style="color: #1890FF; font-size: 800; font-size: 16px;">0 元</p>
          <p>累计已提现金额</p>
          <div v-show="false">
            <a-button type="primary"></a-button>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <!-- <a-row type="flex" justify="space-around" align="middle" style="margin-top: 20px;">
      <a-col :span="6">
      </a-col>
      <a-col :span="4" style="display: flex; justify-content: center;">

      </a-col>
      <a-col :span="4">
      </a-col>
      <a-col :span="4">
      </a-col>
    </a-row> -->

    <!-- <div class="btn">
      <a-button class="ant-btn" type="primary" @click="oilCardPayHandle()">油卡充值</a-button>
      <a-button class="ant-btn" type="primary" @click="oilWithdrawHandle()">提现</a-button>
      <a-button class="ant-btn" type="primary">油卡充值</a-button>
    </div> -->

    <!-- 列表 -->
    <div>
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="入账明细">
          <ErpOilRecordedDetailList ref="recordedDetail" :oilCardApplyUser="userInfo().empId"></ErpOilRecordedDetailList>
        </a-tab-pane>
        <a-tab-pane key="2" tab="交易明细" force-render>
          <ErpOilTransactionDetailList ref="oilTransactionDetail" :oilCardApplyUser="userInfo().empId"></ErpOilTransactionDetailList>
        </a-tab-pane>
      </a-tabs>
    </div>

    <!-- <a-row>
      <a-col :span="6">
        <span>提现金额：</span><a-input prefix="￥" v-model="withdrawMoney" suffix="元" />
      </a-col>
    </a-row> -->

    <!-- 提现金额的弹窗 -->
    <div class="container">

      <a-modal
        :maskClosable="false"
        title="提现金额"
        :width="500"
        :visible="withdrawVisible"
        @cancel="handleCancel"
        @ok="handleOk"
        cancelText="取消">
        <!-- <a-input prefix="￥"  suffix="元" type="number" v-model="withdrawMoney" @change="onWithdrawChange" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''" /> -->
        ￥ &nbsp;&nbsp;&nbsp;<a-input-number :max="99999999" :min="0" :precision="2"  v-model.number="withdrawMoney" placeholder="请输入提现金额"  style="width: 200px" />
        <p style="padding-top: 10px;">当前余额为：{{ dataInfo.drivingSubsidyBalance }}元，<span @click="onAllWithdraw" style="color: #1890FF">全部提现</span></p>
      </a-modal>
    </div>

    <a-modal
      :maskClosable="false"
      title="充值金额"
      :width="500"
      :visible="rechargeVisible"
      @cancel="handleCancel"
      @ok="handleRechargeOk"
      cancelText="取消">
      <!-- <a-input prefix="￥" suffix="元" v-model.number="rechargeMoney" @change="onChrageChange" /> -->
      ￥ &nbsp;&nbsp;&nbsp;<a-input-number :max="99999999" :precision="2" :min="0" style="width: 200px"   v-model.number="rechargeMoney" placeholder="请输入充值金额"   />
    </a-modal>

  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { mapGetters } from 'vuex';
  import moment from 'moment';
  import ErpOilRecordedDetailList from './modules/ErpOilRecordedDetailList'
  import ErpOilTransactionDetailList from './modules/ErpOilTransactionDetailList'
  import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin'
  import { getAction, httpAction } from '@/api/manage'
import { reject } from 'lodash';

  export default {
    name: 'ErpMyOilSubsidy',
    mixins: [mixinDevice, DisabledAuthFilterMixin],
    components: {
      ErpOilRecordedDetailList,
      ErpOilTransactionDetailList
    },
    data () {
      return {
        description: '我的油补表管理页面',
        url: {
          queryByUserId: '/api/erp/modules/workbench/oilSubsidy/erpMyOilSubsidy/queryByUserId',
          updatePayMoney: '/api/erp/modules/workbench/oilSubsidy/erpMyOilSubsidy/updatePayMoney',
          updateWithdrawMoney: '/api/erp/modules/workbench/oilSubsidy/erpMyOilSubsidy/updateWithdrawMoney',
          queryFileById: '/api/erp/files/employee/erpEmployeeFile/queryFileById',
          queryByEmpId: '/api/erpmng/sys/user/queryByEmpId'
          // queryByEmpId: '/api/erpmng/sys/user/queryByEmpIdNew'
        },
        dictOptions: {},
        superFieldList: [],
        dataInfo: {},
        withdrawVisible: false, // 提现金额的弹窗
        rechargeVisible: false, // 充值金额弹窗
        withdrawMoney: 0, // 提现的金额
        rechargeMoney: 0, // 充值的金额
        rechargeIndex: '', // 油卡充值的种类 1 - 自驾补助充值 2 - 累计车贴充值
        cardStatus: '',
        isDeptIdFlag:false, //
      }
    },
     async created() {
      //动态获取油补维护数据信息
     let data= await this.getOilInfo();
     console.log(data);
       //动态获取部门信息
     let data2= await this.getdeptInfo(data);
     console.log(data2);
      //动态获取人员档案数据信息
      let data3 = await this.getEmpInfo(data2);
      console.log(data3);
      this.dataInfo=Object.assign(data3,{});
    },
    computed: {
    },
    methods: {
      ...mapGetters(['userInfo']),
      initDictConfig() {
      },
      getSuperFieldList() {
      },
      handleCancel() {
        this.withdrawVisible = false
        this.rechargeVisible = false
        this.withdrawMoney = 0 // 提现的金额
        this.rechargeMoney = 0 // 充值的金额
      },

      //获取油补人员信息
      getOilInfo(){
          return new Promise((resolve) => {
            getAction(this.url.queryByUserId, { userId: this.userInfo().empId }).then(res => {
              if (res.success) {
                let temp = res.result
                temp.username = this.userInfo().empName;
                 temp.photo = ''
                 temp.deptId = ''
                //this.dataInfo = temp
                // 加载该人入账明细信息
                if (this.dataInfo.proposer) {
                  this.$refs.recordedDetail.loadData(1, this.dataInfo.proposer)
                } else {
                  this.$refs.recordedDetail.dataSource = []
                }
                return resolve(temp);
              } else {
                this.dataInfo.proposer = this.userInfo().empId
                // debugger
                this.$refs.recordedDetail.loadData(1, this.dataInfo.proposer);
              }
            })
            console.log('油补执行完毕');
            
           });
      },
      //动态获取员工档案人员信息
      getEmpInfo(data3){
        let data=Object.assign(data3,{});
          return new Promise((resolve) => {
          getAction(this.url.queryFileById, { id: this.userInfo().empId }).then(res => {
              if (res.success) {
                data.username=res.result.name;
                data.photo=res.result.photo;
                return resolve(data);
                // this.$set(this.dataInfo,'username',res.result.name)
                // this.$set(this.dataInfo,'photo',res.result.photo)
              }
          })
          console.log('人员信息执行完毕');
          
         });
      },
      //动态获取部门信息
      getdeptInfo(data2){
        let data=Object.assign(data2,{});
          return new Promise((resolve) => {
        getAction(this.url.queryByEmpId, { empId: this.userInfo().empId }).then(res => {
            if (res.success) {
              console.log('deptId为：',res.result.departId_dictText);
              // this.$set(this.dataInfo,'deptId',res.result.departId_dictText)
              // this.isDeptIdFlag = true
              console.log('获取部门的结果：',res.result);
              data.deptId=res.result.departId_dictText
              // this.dataInfo.deptId = res.result.departId_dictText
              return resolve(data);
            }
          })
          console.log('部门执行完毕');
        
         });
      },

      // deptId() {
      //   //return filterMultiDictText(this.dictOptions['depart'], this.userInfo().deptId);
      //   return filterMultiDictText(this.dictOptions['depart_code'], this.userInfo().orgCode);
      // },
      
      
      // 提现确定
      handleOk() {
          if(this.withdrawMoney == 0){
              this.$message.warning("金额不能为0!");
              return
          }else if(this.withdrawMoney <= 2000){
            this.$message.warning("提现金额必须在2000元以上！")
            return;
          }

          let regPos = /^[0-9]+.?[0-9]*/; //判断是否是数字。
  
          if(!regPos.test(this.withdrawMoney) ){
            this.$message.warning("金额不能为非数字！");
            return
          }

          if(this.withdrawMoney > this.dataInfo.drivingSubsidyBalance){
            this.$message.warning("截止当前累计自驾补助余额不足！");
            return
          }
          getAction(this.url.updateWithdrawMoney,{userId: this.dataInfo.proposer,cardNumber: this.dataInfo.cardNumber ,money: this.withdrawMoney}).then(res => {
            if(res.success){
              this.$message.success("提现完成!");
              this.withdrawMoney = 0
              this.withdrawVisible = false
              this.reLoad();
              this.$refs.oilTransactionDetail.loadData(1, this.dataInfo.proposer);
            }else{
              this.$message.warning("提现失败!")
              this.withdrawVisible = false
            }
          })

      },

      // 充值确定
      handleRechargeOk () {
        // if (this.rechargeIndex == 1) {
          //如果充值金额大于截止当前

          if(this.rechargeMoney == 0){
            this.$message.warning("金额不能为0!");
            return
          }
          let regPos = /^[0-9]+.?[0-9]*/; //判断是否是数字。
          if(!regPos.test(this.rechargeMoney) ){
            this.$message.warning("金额不能为非数字！");
            return
          }
          if ('' != this.rechargeIndex && undefined != this.rechargeIndex && null != this.rechargeIndex){
            console.log('进入方法3')
            if ('1' == this.rechargeIndex){ //充值金额大于截止当前累计自驾补助余额时
              console.log('进入方法2, this.rechargeMoney为：',this.rechargeMoney)
              console.log('进入方法2, this.dataInfo.drivingSubsidyBalance为：',this.dataInfo.drivingSubsidyBalance)
              if(this.rechargeMoney > this.dataInfo.drivingSubsidyBalance){
                console.log('进入方法1')
                this.$message.warning("截止当前累计自驾补助余额不足！");
                return
              }
            }else if('2' == this.rechargeIndex){ //充值余额大于累计车贴余额时
              if (this.rechargeMoney > this.dataInfo.carSubsidyBalance){
                this.$message.warning("累计车贴余额不足!")
                return;
              }
            }
            //通用充值请求 rechargeIndex : '1':表示截止当前自驾补助余额 ,'2': 表示累计车贴余额
            getAction(this.url.updatePayMoney, { userId: this.userInfo().empId,cardNumber: this.dataInfo.cardNumber , money: this.rechargeMoney, type: this.rechargeIndex}).then(res => {
              if (res.success) {
                this.$message.success('充值成功')
                this.rechargeMoney = 0
                this.rechargeVisible = false
                this.reLoad();
                this.$refs.oilTransactionDetail.loadData(1, this.dataInfo.proposer);

              }else{
                this.$message.error('充值失败');
                this.rechargeVisible = false
              }
            })
          }

        // }
        // } else if (this.rechargeIndex == 2) {
        //   // 代表车贴余额
        // } else {
        //   // 不能充值
        // }
      },

      callback(key) {
        if (key == '1') {
          // console.log('执行1！',this.dataInfo.proposer);
          this.$refs.recordedDetail.loadData(1, this.dataInfo.proposer)
        } else {
          // console.log('执行！',this.dataInfo.proposer);
          this.$refs.oilTransactionDetail.loadData(1, this.dataInfo.proposer)
        }
      },
      reLoad() {
        getAction(this.url.queryByUserId, { userId: this.userInfo().empId }).then(res => {
            if (res.success) {
              let temp = res.result
              temp.username = this.userInfo().empName;
              this.dataInfo = temp
              // 加载该人入账明细信息
              if (this.dataInfo.proposer) {
                this.$refs.recordedDetail.loadData(1, this.dataInfo.proposer)
              } else {
                this.$refs.recordedDetail.dataSource = []
              }
            } else {
              this.dataInfo.proposer = this.userInfo().empId
              // debugger
              // console.log('滴滴滴', this.dataInfo.proposer);
              this.$refs.recordedDetail.loadData(1, this.dataInfo.proposer);
            }
        })
      },
      // 油卡充值
      oilCardPayHandle(item) {
        console.log('当前按钮标志为：',item)
        this.rechargeIndex = item
        this.rechargeVisible = true
      },
      oilWithdrawHandle() {
        this.withdrawVisible = true
      },

      // 点击全部提现
      onAllWithdraw () {
        this.withdrawMoney = this.dataInfo.drivingSubsidyBalance
      },
      // 监听提现金额的数据
      onWithdrawChange (item) {
        // console.log('-----监听数据----', item)
        let reg = this.withdrawMoney.match(/\d+\.?\d{0,2}/)
        // console.log('-----reg', reg)
        if (reg != null) {
          if (reg[0] >= this.dataInfo.drivingSubsidyBalance) {
            this.withdrawMoney = this.dataInfo.drivingSubsidyBalance
          } else {
            this.withdrawMoney = reg[0]
          }
        }
      },

      // 监听充值金额的数据
      onChrageChange (item) {
        let reg = this.rechargeMoney.match(/\d+\.?\d{0,2}/)
        // console.log('-----reg', reg)
        if (reg != null) {
          this.rechargeMoney = reg[0]
        }
      }
    }
  }
</script>
<style scoped >
  @import '~@assets/less/common.less';

  .btn{
    padding-top: 30px;
  }
</style>
